addEventListener（）参数及事件汇总

已于 2022-09-26 14:26:51 修改
阅读量4.9k 收藏 117
点赞数 13
分类专栏： # JavaScript 文章标签： 前端 javascript es6
于 2022-09-26 14:16:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HYHhmbb/article/details/127049968
版权

        addEventListener() 方法用于给元素添加监听事件，同一个元素可以重复添加，并且不会覆盖之前相同事件，用removeEventListener() 方法来移除事件。

使用方法：

    element.addEventListener("click",function(e)=>{
            console.log("点击事件监听");
            console.log("点击返回的参数"：e);
    })

传递参数（包含三个参数）：

1.事件名称（String类型）

例如点击事件click，鼠标按下mousedown（和元素绑定事件类似，但不需要on）

2.监听事件所需要执行的函数（void）

如function（event）{ } 或者箭头函数的形式 （event）=> {   }

 3.触发类型（boolean，选填）

  • true - 事件在捕获阶段执行
  • false - 事件在冒泡阶段执行，默认是false

监听事件种类（转载学习）

  • 鼠标事件

click                          当用户点击某个对象时调用的事件句柄
contextmenu            在用户点击鼠标右键打开上下文菜单时触发
dblclick                     当用户双击某个对象时调用的事件句柄
mousedown              鼠标按钮被按下
mouseenter              当鼠标指针移动到元素上时触发
mouseleave              当鼠标指针移出元素时触发
mousemove              鼠标被移动
mouseover                鼠标移到某元素之上
mouseout                  鼠标从某元素移开
mouseup                   鼠标按键被松开

  • 键盘事件

keydown                     某个键盘按键被按下
keypress                     某个键盘按键被按下并松开
keyup                          某个键盘按键被松开

  • 框架/对象（Frame/Object）事件 

abort                                图像的加载被中断
beforeunload                  该事件在即将离开页面（刷新或关闭）时触发
error                                 在加载文档或图像时发生错误
hashchange                    该事件在当前 URL 的锚部分发生修改时触发
load                                  一张页面或一幅图像完成加载
pageshow                        该事件在用户访问页面时触发
pagehide                          该事件在用户离开当前网页跳转到另外一个页面时触发
resize                                窗口或框架被重新调整大小
scroll                                 当文档被滚动时发生的事件
unload                               用户退出页面

  • 表单事件 

blur                     元素失去焦点时触发
change               该事件在表单元素的内容改变时触发
focus                  元素获取焦点时触发
focusin               元素即将获取焦点是触发
focusout             元素即将失去焦点是触发
input                   元素获取用户输入是触发
reset                   表单重置时触发
search                 用户向搜索域输入文本时触发

  • 剪贴板事件 

copy                    该事件在用户拷贝元素内容时触发
cut                       该事件在用户剪切元素内容时触发
paste                   该事件在用户粘贴元素内容时触发

  • 打印事件

afterprint                 该事件在页面已经开始打印，或者打印窗口已经关闭时触发
beforeprint              该事件在页面即将开始打印时触发

  • 多媒体（Media）事件 

abort                            事件在视频/音频（audio/video）终止加载时触发
canplay                        事件在用户可以开始播放视频/音频（audio/video）时触发
canplaythrough          事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
durationchange          事件在视频/音频（audio/video）的时长发生变化时触发
emptied                       当前播放列表为空时候触发
ended                          事件在视频/音频（audio/video）播放结束时触发
error                            事件在视频/音频（audio/video）数据加载期间发生错误时触发
loadeddata                  事件在浏览器加载视频/音频（audio/video）当前帧时触发触发
loadedmetadata         事件在指定视频/音频（audio/video）的元数据加载后触发
loadstart                     事件在浏览器开始寻找指定视频/音频（audio/video）触发
pause                          事件在视频/音频（audio/video）暂停时触发
play                             事件在视频/音频（audio/video）开始播放时触发
playing                       事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发
progress                    事件在浏览器下载指定的视频/音频（audio/video）时触发
ratechange                事件在视频/音频（audio/video）的播放速度发送改变时触发
seeked                       事件在用户重新定位视频/音频（audio/video）的播放位置后触发
seeking                      事件在用户开始重新定位视频/音频（audio/video）时触发
stalled                        事件在浏览器获取媒体数据，但媒体数据不可用时触发
suspend                     事件在浏览器读取媒体数据中止时触发
timeupdate                事件在当前的播放位置发送改变时触发
volumechange          事件在音量发生改变时触发
waiting                       事件在视频由于要播放下一帧而需要缓冲时触发

  • 动画事件 

animationend                 该事件在 CSS 动画结束播放时触发
animationiteration         该事件在 CSS 动画重复播放时触发
animationstart                该事件在 CSS 动画开始播放时触发

  • 过渡事件

 transitionend                 该事件在 CSS 完成过渡后触发

  • 其他事件 

message                    该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
online                         该事件在浏览器开始在线工作时触发。
offline                         该事件在浏览器开始离线工作时触发。
popstate                     该事件在窗口的浏览历史（history 对象）发生改变时触发。
show                           该事件在窗口显示时触发（onshow方法也仅仅在fireFox浏览器支持）

  • 元素在上下文菜单显示时触发 

 storage                  该事件在 Web Storage(HTML 5 Web 存储)更新时触发（仅限于在控制台里修改、新增和删除，代码里修改是监听不到的）
 toggle                    该事件在用户打开或关闭 元素时触发
 wheel                     该事件在鼠标滚轮在元素上下滚动时触发

我在海底吃菠萝
关注
  • 13
    点赞
  • 踩
  • 117
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
addEventListener() 方法，事件监听
milijiangjun的博客
11-27 4万+
addEventListener() 方法，事件监听 你可以使用 removeEventListener() 方法来移除事件的监听。 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函
Js on及addEventListener原理用法区别解析
10-15
主要介绍了Js on及addEventListener原理用法区别解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue进阶（九十五）：addEventListener() 监听事件
热门推荐
IT全栈 华强工作室
01-20 2万+
语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “oncl...
js addeventlistener
最新发布
Charles1938229的博客
02-17 1092
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
详解addEventListener的三个参数之useCapture
01-21
addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 “click”）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。 代码如下:       请在此点击鼠标。   代码如下: var outDiv = document.getElementById(“outDiv”); var middleDiv = document.g
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the document</title> [removed] function showalert(){ alert('you clicked me!'); } function clickme(){ var pelement=document.getElementsByTagName('p')
addEventListener的3个参数
YaecSakura的博客
03-21 2719
第三个参数是useCapture（变量）：用来判断是捕获还是冒泡。阶段触发事件（默认为false）(冒泡事件触发顺序是由子到父)addEventListener()，接收3个参数。第一个参数event：监听的事件。第二个参数是函数：需要执行的事。阶段触发事件 (捕获事件触发顺序是由父到子)(1)当useCapture为。(2)当useCapture为。
addEventListener 有三个参数
终日而思不如须臾所学。
01-01 4225
addEventListener有三个参数： 事件名称； 事件处理函数； 捕获还是冒泡。 事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子： var o = { handleEvent: event => console.log(event) } document.body.addEventListener(“keydown”, o, false); 第三个参数不一定是bool值，也可以是个对象，它提供了更多选项。 once：只执行一次。 pass
使用addEventListener绑定事件并传参
longtengg1的博客
03-28 6281
1、问题的由来 使用addEventListener 绑定事件时，如果同时想传参，一般可使用匿名函数绑定事件。但是这样做的问题时，匿名函数将不能解绑事件。 所以如何做到又能传参，又能解绑事件呢？ 2、使用bind解决 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); function fa(e) { console.log('传递参数',e)
事件addEventListener（）参数及事件汇总
qq_46344419的博客
04-23 2822
addEventListener（）参数及事件汇总
addEventListener参数和冒泡和捕获详细使用与说明
dupha的博客
04-30 5935
addEventListener第三参数冒泡和捕获详细说明 1.addEventListener参数说明 target.addEventListener(type, listener, useCapture); 参数一: type 表示监听事件类型的字符串。 参数二: listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调
动态的绑定事件addEventListener方法的使用
09-04
本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例，不了解的朋友可以参考下
addEventListener()和removeEventListener()追加事件和删除追加事件
01-18
addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 最后这个布尔值参数是true，...
事件绑定之小测试 onclick addEventListener
01-21
开发工具中应该有相应的功能，于是测试之: 前提：只是一个简单的小测试，而且 addEventListener 属于标准绑定函数，IE 中与此不兼容（IE 相应的是 attachEvent），所以此次测试先抛弃 IE，使用 Firefox 5.0.1, ...
事件绑定之小测试 onclick && addEventListener
09-05
昨晚回去后，和雷子讨论如何才能“检测”到页面上某个元素都绑定了哪些事件监听函数，第一感觉就是应该从浏览器入手，比如FF，或者Chrome等
JavaScript中的事件处理程序（addEventListener）
01-08
事件处理程序（addEventListener） addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和...
window.addEventListener来解决让一个js事件执行多个函数
12-09
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中，也可以全放到[removed]中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window....
addEventListener()第三个参数useCapture (Boolean)详细解析
09-04
true的触发顺序总是在false之前；如果多个均为true，则外层的触发先于内层；如果多个均为false，则内层的触发先于外层
addEventListener 的用法示例介绍
09-04
主要介绍了addEventListener 的用法,需要的朋友可以参考下
addeventlistener事件
03-17
`addEventListener` 是 JavaScript 中的一个方法，它用于在 DOM 元素上监听特定的事件（例如鼠标点击、键盘输入等）并执行相应的回调函数。语法格式如下： ``` element.addEventListener(event, function); ``` 其中 `element` 是要监听事件的 DOM 元素，`event` 是要监听的事件名称（字符串形式），`function` 是当事件触发时要执行的回调函数。 例如，以下代码监听了一个按钮元素的点击事件，并在用户点击按钮时显示一条消息： ``` <button id="myButton">Click me</button> <script> var button = document.getElementById("myButton"); button.addEventListener("click", function(){ alert("You clicked the button!"); }); </script> ``` 如果需要移除监听的事件，可以使用 removeEventListener() 。 ``` element.removeEventListener(event, function); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值